<template>
	<view class="my-page-box">
		<view style="height: 54px;"></view>
		<view style="position: absolute;top: 35%;left: 0;right: 0;">
			<view style="width: 70%;padding: 20px;background-color: #FFFFFF;border-radius: 20px;margin: 0 auto;">
				<view class="avatar-photo">
					<img :src="avatarUrl" style="width:100%;height:100%;border-radius: 50%;" alt="" />
				</view>
				<view class="size16" style="display: flex;align-items: center;justify-content: space-between;">
					<view>姓名</view>
					<view>{{username}}</view>
				</view>
				<view class="size16"
					style="display: flex;align-items: center;justify-content: space-between;margin-top: 30px;"
					@click="setSex">
					<view>性别</view>
					<view>{{usersex}}</view>
				</view>
				<view class="size16"
					style="display: flex;align-items: center;justify-content: space-between;margin-top: 30px;">
					<view>手机号</view>
					<view>{{phone}}</view>
				</view>
			</view>
			<view class="btn-logout">
				<u-button type="primary" text="退出登录" @click="loginOutClick"
					style="width: 100%;border-radius: 20px;"></u-button>
			</view>
			<view class="btn-logout" style="margin-top: 20px;">
				<u-button type="error" text="注销" @click="deleteUserClick"
					style="width: 100%;border-radius: 20px;"></u-button>
			</view>
		</view>
		<uni-popup ref="popupMyRef" :mask-click="false" border-radius="10px 10px 0 0">
			<view style="width:300px;background-color: #ffffff;border-radius: 20px;padding: 30px 20px 10px 20px;box-sizing: border-box
		;">
				<view class="size18" style="color: #333333;font-weight: bold;">选择性别</view>
				<view style="margin-top: 30px;">
					<label class="radio" @click="selectSexFun('男')">
						<radio value="男" :checked="selectSex == '男'" :color="selectSex == '男'?'#007aff':'#ffffff'" /> 男
					</label>
				</view>
				<view style="margin-top: 30px;">
					<label class="radio" @click="selectSexFun('女')">
						<radio value="女" :checked="selectSex == '女'" :color="selectSex == '女'?'#007aff':'#ffffff'" /> 女
					</label>
				</view>
				<view style="display: flex;align-items: center;justify-content: flex-end;margin-top: 20px;">
					<view class="size16" @click="closePopupClick" style="padding: 10px;box-sizing: 
					;">取消</view>
					<view class="size16" @click="setSexFacy" style="margin-left: 15px;color: #3c9cff;padding: 10px;box-sizing: 
					;">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import env from "@/config/env.js";
	import {
		deleteUser,
		updateSex
	} from '@/api/user/index.js';
	export default {
		data() {
			return {
				avatarUrl: env.baseUrl + "/file/get_file?file_name=avatar.png",
				isLoginOut: 0,
				isShow: false,
				username: uni.getStorageSync("user_info").appName,
				usersex: uni.getStorageSync("user_info").appSex ? uni.getStorageSync("user_info").appSex : '男',
				phone: uni.getStorageSync("user_info").appPhone,
				selectSex: uni.getStorageSync("user_info").appSex ? uni.getStorageSync("user_info").appSex : '男',
			};
		},
		methods: {
			loginOutClick() {
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '确认退出登录吗？',
					success: function(res) {
						if (res.confirm) {
							that.confirmLogout()
						} else if (res.cancel) {

						}
					}
				});

			},
			confirmLogout() {
				this.isShow = false
				if (this.isLoginOut == 0) {
					uni.removeStorageSync('is_login');
					uni.removeStorageSync('user_info');
					// 跳转到登录
					uni.reLaunch({
						url: '/pages/login/index',
					});
				} else {
					this.deleteUserFunJieKou()
				}
			},
			deleteUserClick() {
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '确认注销当前账号吗？',
					success: function(res) {
						if (res.confirm) {
							that.deleteUserFunJieKou()
						} else if (res.cancel) {

						}
					}
				});

			},
			async deleteUserFunJieKou() {
				let params = {
					uuid: uni.getStorageSync("user_info").appUuid
				}
				const bindResult = await deleteUser(params);
				if (bindResult.status === 200) {
					uni.removeStorageSync('is_login');
					uni.removeStorageSync('user_info');
					// 跳转到登录
					uni.reLaunch({
						url: '/pages/login/index',
					});
				} else {
					uni.showToast({
						title: bindResult.msg,
						icon: "none"
					});
				}
			},
			selectSexFun(val) {
				this.selectSex = val
			},
			setSex() {
				this.$refs.popupMyRef.open('center');
				this.selectSex = uni.getStorageSync("user_info").appSex ? uni.getStorageSync("user_info").appSex : '男'
			},
			closePopupClick() {
				this.$refs.popupMyRef.close();
			},
			async setSexFacy() {
				let params = {
					sex: this.selectSex,
					uuid: uni.getStorageSync("user_info").appUuid
				}
				const bindResult = await updateSex(params);
				if (bindResult.status === 200) {
					this.$refs.popupMyRef.close();
					uni.setStorageSync('user_info', bindResult.data);
					this.usersex = bindResult.data.appSex
				} else {
					uni.showToast({
						title: bindResult.msg,
						icon: "none"
					});
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.my-page-box {
		height: 100vh;
		background-repeat: no-repeat;
		background-color: rgba(254, 247, 266, 1);
	}

	.avatar-photo {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background-color: bisque;
		margin: 0 auto;
		margin-top: -55px;
	}

	.btn-logout {
		width: 70%;
		margin: 0 auto;
		margin-top: 40px;
	}

	.add-btn {
		position: fixed;
		left: calc(50% - 22px);
		bottom: 22px;
		z-index: 10000;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #3c9cff;
	}
</style>